<template>
  <div>
    <div class="allcatin_top">
      <el-button type="success" @click="addtable">添加表格</el-button>
      <el-button type="success" @click="savetable('scope.row')">保存数据</el-button>
    </div>

    <div class="allcatin_hader">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @cell-dblclick="edit"
        :header-cell-style="thStyleFun"
        :cell-style="cellStyleFun"
      >

          <el-table-column label="CODE" prop="CODE">
            <template slot-scope="scope">
              <el-form :model="scope.row" ref="scope.row" :rules="rules">
                <el-form-item style="margin-top: 15px" prop="CODE">
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model="scope.row.CODE"
                    @blur="blur(scope.row.userId, scope.row.CODE)"
                    size="mini"
                  ></el-input>
                  <span v-else>{{ scope.row.CODE }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column label="NAME" prop="NAME">
            <template slot-scope="scope">
              <el-form :model="scope.row" ref="scope.row" :rules="rules">
                <el-form-item style="margin-top: 15px" prop="NAME">
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model="scope.row.NAME"
                    @blur="onblur(scope.row.userId, scope.row.NAME)"
                    size="mini"
                  ></el-input>
                  <span v-else>{{ scope.row.NAME }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <!--  @blur="blurmall(scope.row.userId, scope.row.DESC)" -->
          <el-table-column label="DESC" prop="DESC">
            <template slot-scope="scope">
              <el-form :model="scope.row">
                <el-input
                  v-if="scope.row.isEdit"
                  v-model="scope.row.DESC"
                  size="mini"
                ></el-input>
                <span v-else>{{ scope.row.DESC }}</span>
                <!-- <span style="margin-left: 10px">{{ scope.row.size_origin }}</span> -->
              </el-form>
            </template>
          </el-table-column>
          <!--    @blur="blurphone(scope.row.userId, scope.row.TYPE)" -->
          <el-table-column label="TYPE" prop="TYPE">
            <template slot-scope="scope">
              <el-form :model="scope.row">
                <el-input
                  v-if="scope.row.isEdit"
                  v-model="scope.row.TYPE"
                  size="mini"
                ></el-input>
                <span v-else>{{ scope.row.TYPE }}</span>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                :loading="scope.row.isLoading"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row,'scope.row')"
                >删除</el-button
              >
            </template>
          </el-table-column>
     
      </el-table>
    </div>
  </div>
</template>

<script>
//  import qs from 'qs'
export default {
  data() {
    return {
      tablelist: [],
      tableData: [],
      rules: {
        CODE: [{ required: true, message: "请输入CODE", trigger: "blur" }],
        NAME: [{ required: true, message: "请输入NAME", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.gettablelist();
  },
  methods: {
    gettablelist() {
      this.ajax.get("func/1023/selAlarmCode").then((res) => {
        // console.log(res);
        if (res.status == 200) {
          res.data.forEach((ele) => {
            this.$set(ele, "isEdit", false);
            this.$set(ele, "isAbnormal", false);
          });
          this.tableData = res.data;
        }
      });
    },

    thStyleFun() {
      return "text-align: center;background:#696969;color:#fff;text-align:center";
    },
    cellStyleFun() {
      return "text-align:center";
    },

    edit(row, column, cell, event) {
      // console.log(row),
      // console.log(column)
      console.log(cell);
      console.log(event);
      if (row.isEdit) return;
      row.isEdit = !row.isEdit;
    },

    addtable() {
      var obj = {
        DESC: "",
        isAbnormal: false,
        isEdit: false,
        CODE: "",
        NAME: "",
        TYPE: "",
      };
      this.tableData.unshift(obj);
      // console.log(this.tableData.length);
    },

    savetable() {
      // console.log(formName);
      // console.log('1111111111111',this.$refs[formName])
      // console.log('2222222222222',this.$refs)
      // this.$refs[formName].validate((valid) => {
   
        // if (valid) {
          let ary = [];
          this.tableData.forEach((item) => {
            let obj = {
              CODE: item.CODE,
              DESC: item.DESC,
              NAME: item.NAME,
              TYPE: item.TYPE,
            };
            ary.push(obj);
          });

          for (let i = 0; i < ary.length - 1; i++) {
            if (ary[i].CODE == ary[i + 1].CODE) {
              this.$alert(ary[i].CODE, "CODE不能相同", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
              return;
            } else if (ary[i].CODE == "") {
              this.blur(ary[i].CODE);
              return;
            } else if (ary[i].NAME == "") {
              this.onblur(ary[i].NAME);
              return;
            }
          }
          this.ajax({
            method: "POST",
            url: "func/1023/updateAlarmCode?",
            data: ary,
          }).then((res) => {
            if (res.data.code == 2000) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.gettablelist();
            } else {
              this.$alert(res.data.text, "id不能相同", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
            }
          });
        // }
      // });
    },

    blur(id) {
      // console.log("blur事件被执行了",item,id)
      console.log(id);
      if (id == "") {
        this.$alert("CODE不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    onblur(id) {
      if (id == "") {
        this.$alert("name不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    blurmall(item, id) {
      if (id == "") {
        this.$alert("DESC不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    blurphone(item, id) {
      if (id == "") {
        this.$alert("TYPE不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      row.isLoading = true;
      this.$confirm("此操作将进行删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          setTimeout(function () {
            row.isLoading = false;
          }, 1500);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          row.isLoading = false;
        });
      // console.log(index, row);
      // console.log(this.tableData.length)
    },
  },
};
</script>

<style  scoped>
.allcation_cont {
  width: 100%;
}
.allcatin_top {
  width: 100%;
  /* border:1px solid #000; */
  display: flex;
  background: #ffffff;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-top: 5px;
  /* padding-right:-10px; */
}
.allcatin_hader {
  margin-top: 30px;
}
</style>